<template>
  <div class="card">
    <div id="mainPie" style="width: 100%; height: 250px"></div>
    <ul class="dataList">
      <li v-for="(e, idx) in data" :key="idx">
        <div class="leftText">{{ e.name }}</div>
        <div class="rightText">{{ e.value }}{{dw}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
import * as echarts from "echarts";

export default {
  name: "Setting",
  components: {},
  data() {
    return {
      popupShow: 0,
      isShowDeleteComfirm: false,
    };
  },
  props: {
    data: [],
    dw: {
      type: String,
      default() {
        return this.$t('second');
      },
    }
    // selectedNum: {
    //         type: Number,
    //         default: 0
    //     },
  },
  computed: {
    ...mapState([
      "motorLock",
      "battery",
      "role",
      "isShare",
      "devName",
      "darkMode",
    ]),
    ...mapState({
      defenceSwitch: (state) => state.defenceSwitch.on,
      startMode: (state) => state.startMode.mode - 1,
      autocruiseSwitch: (state) => state.autocruiseSwitch.on,
      speedUnit: (state) => state.mileageMode.mode,
      status: (state) => state.status.status,
    }),
    ...mapGetters(["canControl"]),
  },
  methods: {
    draw() {
      var myChart = echarts.init(document.getElementById("mainPie"));
      // 绘制图表
      let optopn = {
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
          },
        },

        grid: [{ bottom: "1", top: "40", left: "24", right: "50" }],
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [20, 70],
            center: ["50%", "40%"],
            //roseType: "area",
            itemStyle: {
              borderRadius: 0,
              borderColor: !this.darkMode ? "#fff" : "#303030",
              borderWidth: 1,
            },
            labelLine: {
              normal: {
                length: 3,
              },
            },
            color: [
              "#A12DF7",
              "rgb(10,89,247)",
              "rgb(237,111,33)",
              "rgb(100,187,92)",
              "rgb(232,64,38)",
            ],
            label: {
              color: this.darkMode ? "#fff" : "#000",
            },
            data: this.data,
          },
        ],
      };
      myChart.setOption(optopn);
    },
  },
  mounted() {
    console.log(document.getElementById("mainPie"));
    this.draw();
    // 重置物理返回键
    window.goBack = () => {
      if (this.popupShow) {
        this.popupShow = 0;
        return;
      }
      this.$router.goBack();
    };
  },
};
</script>
<style lang="less" scoped>
@import url("../style/public.less");
.card {
  .dataList {
    width: calc(100% - 2.4rem);
    margin: 0 auto;
    li {
      position: relative;
      height: 4.8rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &::after {
        content: "";
        display: block;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 0rem;
        right: 0rem;
        background-color: var(--emui_color_divider_horizontal);
        transform: scaleY(0.25);
      }
      &:last-child {
        &::after {
          height: 0px;
        }
      }
      .leftText {
        font-size: 1.6rem;
        color: rgba(0, 0, 0, 0.9);
      }
      .rightText {
        font-size: 1.2rem;
        color: rgba(0, 0, 0, 0.6);
      }
    }
  }
  align-self: stretch;
  .cardStyle();
  margin-top: 0.8rem;
  padding: 0.4rem 0;
  .switch {
    width: 4rem;
    height: 2rem;
    background-image: var(--ic_switch_off);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    &.on {
      background-image: var(--ic_switch_on);
    }
  }
}
// 适配
.pad {
  #setting {
    .content {
      margin: 0 var(--pad_column_1);
    }
  }
}
</style>